import React,{useEffect} from 'react'
import { useObserver } from 'mobx-react-lite';
import { useHistory } from 'react-router-dom';
import useQueryString from '../hooks/useQueryString'
import useStore from '../context/useStore';

const Aritice: React.FC = ()=>{
    let history = useHistory();
    let id = useQueryString(history.location.search, 'id');
    let {mine} = useStore();

    useEffect(()=>{
        mine.Details(id);
    }, [])
    console.log(mine.arr)
    return useObserver(()=>
    <div>
        <div>
            排名 名称
        </div>
        <div className="left">
            {
                mine.rankId.map((item:any,index)=>{
                    return <div key={index}>
                        <div>
                            <span>{index+1}</span>
                            <span>
                                {item[0].image && <img src={item[0].image} alt=''/>}
                                {item[0].name}
                            </span>
                        </div>
                    </div>
                })
            }
        </div>
         <div>
            {
               mine.arr.map((item:any,index)=>{
                   console.log(item)
                   return item.list.map((items)=>{
                        return <span>{items.name}</span>
                   })
               }) 
            }
        </div>
        <div>
            {
                mine.rankId.map((item:any,index)=>{
                    return <div>
                        {
                            item.map((i,num)=>{
                                if(num!==0){
                                    return <span>
                                        {i.score}
                                    </span>
                                }
                            })
                        }
                    </div>
                })
            }
        </div>
    </div>
       
    )
};
export default Aritice